<template>
  <div class="layout" style="margin-bottom: 80px">
    <load :state="loading"></load>
    <div class="headContainer">
      <div class="flex-c">
        <div class="flex-r" style="margin-left: 28px; margin-top: 47px" >
          <div class="today">
            <span class="money-tip">今日收益</span><br/>
            <span class="money" v-text="getTodayRebate"></span>
          </div>
          <div class="divider"></div>
          <div class="allRebate" style="text-align: center">
            <span class="money-tip">全部返利</span><br/>
            <span class="money" v-text="getAllRebate" style="font-size: 28px; line-height: 40px; height: 40px"></span>
          </div>
          <div class="divider"></div>
          <div class="month">
            <span class="money-tip">本月收益</span><br/>
            <span class="money" v-text="getMonthRebate"></span>
          </div>
        </div>
        <div class="flex-r" style="margin-top: 5vw">
          <div class="arrival" style="margin-right: 9vw">
            <span class="money-tip">已到账收益</span><br/>
            <span class="money" v-text="getArrivalRebate"></span>
          </div>
          <div class="frozen" style="text-align: center">
            <span class="money-tip">冻结中收益</span><br/>
            <span class="money" v-text="getFrozenRebate"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="reminder">
      <van-list v-model="load"
                :finished="LastData[active]"
                @load="loadMore"
                class="news-ul">
        <van-cell v-for="(item,index) in news[active]" :key="index" class="news-li">
          <news-item :news="item"/>
        </van-cell>
      </van-list>
      <p v-if="LastData[active]" class="no-more">没有更多了</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  // import News from '../../components/news/newsList';
  import NewsItem from '../../components/user/newItem';

  export default {
    name: 'userRebate',
    components: {
      NewsItem
    },
    data() {
      return {
        rebateData: {
          allRebate: '获取中',
          todayRebate: '获取中',
          monthRebate: '获取中',
          arrivedRebate: '获取中',
          frozenRebate: '获取中'
        },
        notice: [],
        newsType: 'Integral',
        active: 0,
        news: [], // 获取的积分消息
        LoadData: [], // 是否应该调用获取数据方法
        LastData: [], // 数据是否加载完没有了
        loading: true,
        load: false,
        pages: [], // 请求页数
        size: 10
      };
    },
    created() {
      this.news = new Array(3).fill([]);
      this.pages = new Array(3).fill(0);
      this.LastData = new Array(3).fill(false);
      this.LoadData = new Array(3).fill(true);
      this.$UserReq.getUserBalance()
        .then((res) => {
          console.log('13-getUserBalance', res);
          let resdata = res.data;
          this.rebateData.frozenRebate = resdata.frozen;
          // this.rebateData.arrivedRebate = resdata.profit.toFixed(2);
        });
      this.$UserReq.getUserIncome()
        .then((res) => {
          console.log('14-getUserIncome', res);
          // this.rebateData.allRebate = res.data.total;
          // this.rebateData.todayRebate = res.data.day;
          // this.rebateData.monthRebate = res.data.mouth;
          // this.rebateData.arrivedRebate = res.data.total;
          this.rebateData.allRebate = Number(res.data.total).toFixed(2);
          this.rebateData.todayRebate = Number(res.data.day).toFixed(2);
          this.rebateData.monthRebate = Number(res.data.mouth).toFixed(2);
          this.rebateData.arrivedRebate = Number(res.data.total).toFixed(2);
        });
    },
    mounted() {
      this.loadMore();
    },
    computed: {
      getAllRebate() {
        // todo 绑定余额
        return this.rebateData.allRebate;
      },
      getTodayRebate() {
        // todo 绑定余额
        return this.rebateData.todayRebate;
      },
      getMonthRebate() {
        // todo 绑定余额
        return this.rebateData.monthRebate;
      },
      getArrivalRebate() {
        // todo 绑定余额
        return this.rebateData.arrivedRebate;
      },
      getFrozenRebate() {
        // todo 绑定余额
        return this.rebateData.frozenRebate;
      }

    },
    methods: {
      clickTab(index) {
        this.active = index;
        this.newsType = this.notice[index].newsType;
        if (this.pages[index] === 0) {
          this.loadMore();
        }
      },
      loadMore() {
        // 获取数据和上拉加载
        let index = this.active;
        // let type = this.newsType;
        if (this.LoadData[index] === true) {
          console.log(1111, this.LastData[index]);
          this.load = true;
          this.LoadData[index] = false;
          let data = {
            page: this.pages[index],
            size: this.size
          };
          // 根据type判断方法
          this.$UserReq.getRebateNews(data).then(res => {
            this.loading = false;
            this.load = false;
            console.log('getRebateNewsgetRebateNews:', res);
            this.news[index] = this.news[index].concat(res.data);
            this.pages[index]++;
            // 没有数据了
            let DataNum = res.data.length;
            if (DataNum === 0) {
              this.LoadData[index] = false;
              this.LastData[index] = true;
              console.log(5555, this.LastData[index]);
              return;
            }
            //  打开查询数据接口
            this.LoadData[index] = true;
          }, () => {
            this.loading = false;
          });
        }
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()
    height vw(32)
    width vw(1)
    margin-right vw(20)

  .space
    space()

  .layout
    width vw(375)
    font-family: PingFangSC-Regular

  .headContainer
    position fixed
    width 100vw
    height: vw(196);
    background url("http://yqs1.oss-cn-huhehaote.aliyuncs.com/local/userbackground.jpg")
    background-size  vw(375) vw(195.68)
    overflow hidden
    z-index 1000
    text-align right

  .headContainer:after
    position: absolute
    left -90vw
    right 0
    bottom vw(-180)
    z-index: 1
    content: ''
    width: 280%
    height: vw(196);
    border-radius:50%
    background-color bk-color

  .money-tip
    height vw(18)
    line-height vw(18)
    word-vw(13, white)
    margin-right vw(8)
  .money
    height vw(21)
    line-height vw(21)
    word-vw(15, white)
    margin-right vw(8)

  .reminder {
    margin-top vw(200)
    .no-more {
      word-vw(12, third-ash);
      flex-center();
      margin-bottom: 30vw;
    }
    .news-ul {
      padding: 2vw 3vw
      .news-li {
        background: white;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 0
      }
    }
    .van-tab__pane {
      position relative
    }
    .van-tab__pane:first-of-type .notice {
      top: 2vw;
      left: 30vw;
      z-index: 999;
    }
    .van-tab__pane:nth-of-type(2) .notice {
      top: 2vw;
      left: 60vw;
      z-index: 999;
    }
    .van-tab__pane:last-of-type .notice {
      top: 2vw;
      left: 90vw;
      z-index: 999;
    }
    .notice {
      width: 4vw;
      height: 4vw;
      border-radius(50%);
      background: #e7395a;
      border: 1px solid #fff;
      position: fixed;
      flex-center();
      & span {
        color: white
        font-size word10
      }
    }
  }

</style>
